<template>
  <div class="conversion-root">
    <van-sticky>
      <van-nav-bar title="会员互转" left-arrow @click-left="$router.goBack()" />
    </van-sticky>

    <div class="input-box" style="margin-top: .2rem">
      <div class="title">接收账号</div>
      <div class="input flex-btw">
        <van-field v-model="value" placeholder="请输入接收账号" />
      </div>
    </div>

    <div class="input-box">
      <div class="title">转出数量</div>
      <div class="input flex-btw">
        <van-field v-model="value" placeholder="请输入转出数量" />
      </div>
    </div>

    <div class="input-box">
      <div class="title">手续费用</div>
      <div class="input flex-btw">
        {{ money }}
      </div>
    </div>

    <div class="input-box">
      <div class="title">交易密码</div>
      <div class="input flex-btw">
        <van-field
          type="password"
          v-model="value"
          placeholder="请输入支付密码"
        />
      </div>
    </div>

    <div class="input-box">
      <div class="title">手机号/邮箱</div>
      <div class="input flex-btw">
        <van-field v-model="value" placeholder="请输入手机号/邮箱" />
      </div>
    </div>

    <div class="input-box">
      <div class="title">手机号/短信验证</div>
      <div class="input flex-btw">
        <van-field v-model="value" placeholder="请输入手机号/邮箱" />
        <div class="text" style="min-width: 1.2rem">获取验证码</div>
      </div>
    </div>

    <div class="button">确定</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          name: "ERC20",
        },
        {
          name: "TRC20",
        },
      ],
      current: 0,
      value: "",
      money: 0,
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.conversion-root {
  font-size: 0.26rem;
  color: #141414;
  .input-box {
    padding: 0 0.3rem;
    padding-bottom: 0.1rem;
    border-bottom: 0.01rem solid #fafafa;

    .title {
      text-align: left;
      margin-bottom: 0.2rem;
      margin-top: 0.2rem;
    }

    .label-box {
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      flex-wrap: wrap;

      .label {
        border: 0.02rem solid #eee;
        background-color: #eee;
        padding: 0.12rem 0.33rem;
        margin-right: 0.3rem;
        font-size: 0.2rem;
        margin-bottom: 0.2rem;
      }

      .change {
        background-color: #fff;
        border: 0.02rem solid #2d7afe;
        color: #2d7afe;
      }
    }

    img {
      width: 0.2rem;
      height: 0.2rem;
    }

    .text {
      font-size: 0.2rem;
      color: #2d7afe;
      min-width: 0.6rem;
    }
  }

  .line {
    margin-top: 0.1rem;
    height: 0.04rem;
    background-color: #f9f8f8;
  }

  .tips-box {
    padding: 0 0.3rem;
    .tips {
      padding: 0.5rem 0.4rem;
      font-size: 0.2rem;
      color: #919191;
      background-color: #eeeeee;
      border-radius: 0.1rem;
      line-height: 0.36rem;
    }
  }

  .count-box {
    margin-top: 0.7rem;
    padding: 0 0.3rem;
    font-size: 0.26rem;

    .num {
      font-size: 0.2rem;
    }
  }

  .button {
    background-color: #2d7afe;
    width: 5.06rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    color: #fff;
    border-radius: 0.1rem;
    font-size: 0.3rem;
    margin: 0.45rem auto;
  }
}
</style>
